<template>
    <div class="bake">
        <div class="toparea">
            <div class="statuslist">
                <div class="status_description">
                    <img src="../assets/green.png" class="status1">
                    <p class="description">生产</p>
                </div>
                <div class="status_description">
                    <img src="../assets/yellow.png" class="status2">
                    <p class="description">待机</p>
                </div>
                <div class="status_description">
                    <img src="../assets/red.png" class="status3">
                    <p class="description">停机</p>
                </div>
            </div>
            <div class="currenttime">{{ currentTime }}</div>
        </div>
        <div class="mainarea">
            <div class="running_state">
                <p class="subtitle">运行状态</p>
                <div class="statearea">
                    <div class="statecontent">
                        <div class="statemap">
                            <div class="linestate">
                                <p class="topic">1线</p>
                                <div class="ovenlist">
                                    <div class="connectline"></div>
                                    <div class="oven">
                                        <div class="oven_graphic">
                                            <div class="graphic_area">
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line1Oven1Chamber1) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line1Oven1Chamber1,line1Oven1Chamber1Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber1) }"></div>
                                                </div>
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line1Oven1Chamber2) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line1Oven1Chamber2,line1Oven1Chamber2Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber2) }"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oven_state">
                                            <p class="oven_name">1#</p>
                                            <img src="../assets/green.png" class="ovenstatus1" v-show="line1Oven1.isrun">
                                            <img src="../assets/yellow.png" class="ovenstatus2" v-show="line1Oven1.isstandby" v-if="isFlashing">
                                            <img src="../assets/red.png" class="ovenstatus3" v-show="line1Oven1.isshutdown" v-if="isFlashing">
                                        </div>
                                    </div>
                                    <div class="connectline"></div>
                                    <div class="oven">
                                        <div class="oven_graphic">
                                            <div class="graphic_area">
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line1Oven2Chamber1) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line1Oven2Chamber1,line1Oven2Chamber1Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber1) }"></div>
                                                </div>
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line1Oven2Chamber2) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line1Oven2Chamber2,line1Oven2Chamber2Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber2) }"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oven_state">
                                            <p class="oven_name">2#</p>
                                            <img src="../assets/green.png" class="ovenstatus1" v-show="line1Oven2.isrun">
                                            <img src="../assets/yellow.png" class="ovenstatus2" v-show="line1Oven2.isstandby" v-if="isFlashing">
                                            <img src="../assets/red.png" class="ovenstatus3" v-show="line1Oven2.isshutdown" v-if="isFlashing">
                                        </div>
                                    </div>
                                    <div class="connectline"></div>
                                    <div class="oven">
                                        <div class="oven_graphic">
                                            <div class="graphic_area">
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line1CoolingBoxChamber1) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line1CoolingBoxChamber1,line1CoolingBoxChamber1Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber1) }"></div>
                                                </div>
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line1CoolingBoxChamber2) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line1CoolingBoxChamber2,line1CoolingBoxChamber2Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber2) }"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oven_state">
                                            <p class="oven_name special">冷却箱1#</p>
                                            <img src="../assets/green.png" class="ovenstatus1" v-show="line1CoolingBox.isrun">
                                            <img src="../assets/yellow.png" class="ovenstatus2" v-show="line1CoolingBox.isstandby" v-if="isFlashing">
                                            <img src="../assets/red.png" class="ovenstatus3" v-show="line1CoolingBox.isshutdown" v-if="isFlashing">
                                        </div>
                                    </div>
                                    <div class="connectline"></div>
                                    <div class="oven">
                                        <div class="oven_graphic">
                                            <div class="graphic_area">
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line1Oven3Chamber1) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line1Oven3Chamber1,line1Oven3Chamber1Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber1) }"></div>
                                                </div>
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line1Oven3Chamber2) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line1Oven3Chamber2,line1Oven3Chamber2Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber2) }"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oven_state">
                                            <p class="oven_name">3#</p>
                                            <img src="../assets/green.png" class="ovenstatus1" v-show="line1Oven3.isrun">
                                            <img src="../assets/yellow.png" class="ovenstatus2" v-show="line1Oven3.isstandby" v-if="isFlashing">
                                            <img src="../assets/red.png" class="ovenstatus3" v-show="line1Oven3.isshutdown" v-if="isFlashing">
                                        </div>
                                    </div>
                                    <div class="connectline"></div>
                                    <div class="oven">
                                        <div class="oven_graphic">
                                            <div class="graphic_area">
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line1Oven4Chamber1) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line1Oven4Chamber1,line1Oven4Chamber1Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber1) }"></div>
                                                </div>
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line1Oven4Chamber2) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line1Oven4Chamber2,line1Oven4Chamber2Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber2) }"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oven_state">
                                            <p class="oven_name">4#</p>
                                            <img src="../assets/green.png" class="ovenstatus1" v-show="line1Oven4.isrun">
                                            <img src="../assets/yellow.png" class="ovenstatus2" v-show="line1Oven4.isstandby" v-if="isFlashing">
                                            <img src="../assets/red.png" class="ovenstatus3" v-show="line1Oven4.isshutdown" v-if="isFlashing">
                                        </div>
                                    </div>
                                    <div class="connectline"></div>
                                </div>
                            </div>
                            <div class="linestate">
                                <p class="topic">2线</p>
                                <div class="ovenlist">
                                    <div class="connectline"></div>
                                    <div class="oven">
                                        <div class="oven_graphic">
                                            <div class="graphic_area">
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line2Oven1Chamber1) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line2Oven1Chamber1,line2Oven1Chamber1Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven1Chamber1) }"></div>
                                                </div>
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line2Oven1Chamber2) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line2Oven1Chamber2,line2Oven1Chamber2Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven1Chamber2) }"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oven_state">
                                            <p class="oven_name">5#</p>
                                            <img src="../assets/green.png" class="ovenstatus1" v-show="line2Oven1.isrun">
                                            <img src="../assets/yellow.png" class="ovenstatus2" v-show="line2Oven1.isstandby" v-if="isFlashing">
                                            <img src="../assets/red.png" class="ovenstatus3" v-show="line2Oven1.isshutdown" v-if="isFlashing">
                                        </div>
                                    </div>
                                    <div class="connectline"></div>
                                    <div class="oven">
                                        <div class="oven_graphic">
                                            <div class="graphic_area">
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line2Oven2Chamber1) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line2Oven2Chamber1,line2Oven2Chamber1Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven2Chamber1) }"></div>
                                                </div>
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line2Oven2Chamber2) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line2Oven2Chamber2,line2Oven2Chamber2Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven2Chamber2) }"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oven_state">
                                            <p class="oven_name">6#</p>
                                            <img src="../assets/green.png" class="ovenstatus1" v-show="line2Oven2.isrun">
                                            <img src="../assets/yellow.png" class="ovenstatus2" v-show="line2Oven2.isstandby" v-if="isFlashing">
                                            <img src="../assets/red.png" class="ovenstatus3" v-show="line2Oven2.isshutdown" v-if="isFlashing">
                                        </div>
                                    </div>
                                    <div class="connectline"></div>
                                    <div class="oven">
                                        <div class="oven_graphic">
                                            <div class="graphic_area">
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line2CoolingBoxChamber1) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line2CoolingBoxChamber1,line2CoolingBoxChamber1Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2CoolingBoxChamber1) }"></div>
                                                </div>
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line2CoolingBoxChamber2) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line2CoolingBoxChamber2,line2CoolingBoxChamber2Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2CoolingBoxChamber2) }"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oven_state">
                                            <p class="oven_name special">冷却箱2#</p>
                                            <img src="../assets/green.png" class="ovenstatus1" v-show="line2CoolingBox.isrun">
                                            <img src="../assets/yellow.png" class="ovenstatus2" v-show="line2CoolingBox.isstandby" v-if="isFlashing">
                                            <img src="../assets/red.png" class="ovenstatus3" v-show="line2CoolingBox.isshutdown" v-if="isFlashing">
                                        </div>
                                    </div>
                                    <div class="connectline"></div>
                                    <div class="oven">
                                        <div class="oven_graphic">
                                            <div class="graphic_area">
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line2Oven3Chamber1) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line2Oven3Chamber1,line2Oven3Chamber1Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven3Chamber1) }"></div>
                                                </div>
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line2Oven3Chamber2) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line2Oven3Chamber2,line2Oven3Chamber2Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven3Chamber2) }"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oven_state">
                                            <p class="oven_name">7#</p>
                                            <img src="../assets/green.png" class="ovenstatus1" v-show="line2Oven3.isrun">
                                            <img src="../assets/yellow.png" class="ovenstatus2" v-show="line2Oven3.isstandby" v-if="isFlashing">
                                            <img src="../assets/red.png" class="ovenstatus3" v-show="line2Oven3.isshutdown" v-if="isFlashing">
                                        </div>
                                    </div>
                                    <div class="connectline"></div>
                                    <div class="oven">
                                        <div class="oven_graphic">
                                            <div class="graphic_area">
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line2Oven4Chamber1) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line2Oven4Chamber1,line2Oven4Chamber1Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven4Chamber1) }"></div>
                                                </div>
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line2Oven4Chamber2) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line2Oven4Chamber2,line2Oven4Chamber2Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line2Oven4Chamber2) }"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oven_state">
                                            <p class="oven_name">8#</p>
                                            <img src="../assets/green.png" class="ovenstatus1" v-show="line2Oven4.isrun">
                                            <img src="../assets/yellow.png" class="ovenstatus2" v-show="line2Oven4.isstandby" v-if="isFlashing">
                                            <img src="../assets/red.png" class="ovenstatus3" v-show="line2Oven4.isshutdown" v-if="isFlashing">
                                        </div>
                                    </div>
                                    <div class="connectline"></div>
                                </div>
                            </div>
                            <div class="linestate">
                                <p class="topic">3线</p>
                                <div class="ovenlist">
                                    <div class="connectline"></div>
                                    <div class="oven">
                                        <div class="oven_graphic">
                                            <div class="graphic_area">
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line1Oven1Chamber1) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line1Oven1Chamber1,line1Oven1Chamber1Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber1) }"></div>
                                                </div>
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line1Oven1Chamber1) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line1Oven1Chamber1,line1Oven1Chamber2Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven1Chamber2) }"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oven_state">
                                            <p class="oven_name">9#</p>
                                            <img src="../assets/green.png" class="ovenstatus1" v-show="line1Oven1.isrun">
                                            <img src="../assets/yellow.png" class="ovenstatus2" v-show="line1Oven1.isstandby" v-if="isFlashing">
                                            <img src="../assets/red.png" class="ovenstatus3" v-show="line1Oven1.isshutdown" v-if="isFlashing">
                                        </div>
                                    </div>
                                    <div class="connectline"></div>
                                    <div class="oven">
                                        <div class="oven_graphic">
                                            <div class="graphic_area">
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line1Oven2Chamber1) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line1Oven2Chamber1,line1Oven2Chamber1Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber1) }"></div>
                                                </div>
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line1Oven2Chamber2) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line1Oven2Chamber2,line1Oven2Chamber2Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven2Chamber2) }"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oven_state">
                                            <p class="oven_name">10#</p>
                                            <img src="../assets/green.png" class="ovenstatus1" v-show="line1Oven2.isrun">
                                            <img src="../assets/yellow.png" class="ovenstatus2" v-show="line1Oven2.isstandby" v-if="isFlashing">
                                            <img src="../assets/red.png" class="ovenstatus3" v-show="line1Oven2.isshutdown" v-if="isFlashing">
                                        </div>
                                    </div>
                                    <div class="connectline"></div>
                                    <div class="oven">
                                        <div class="oven_graphic">
                                            <div class="graphic_area">
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line1CoolingBoxChamber1) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line1CoolingBoxChamber1,line1CoolingBoxChamber1Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber1) }"></div>
                                                </div>
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line1CoolingBoxChamber2) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line1CoolingBoxChamber2,line1CoolingBoxChamber2Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1CoolingBoxChamber2) }"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oven_state">
                                            <p class="oven_name special">冷却箱3#</p>
                                            <img src="../assets/green.png" class="ovenstatus1" v-show="line1CoolingBox.isrun">
                                            <img src="../assets/yellow.png" class="ovenstatus2" v-show="line1CoolingBox.isstandby" v-if="isFlashing">
                                            <img src="../assets/red.png" class="ovenstatus3" v-show="line1CoolingBox.isshutdown" v-if="isFlashing">
                                        </div>
                                    </div>
                                    <div class="connectline"></div>
                                    <div class="oven">
                                        <div class="oven_graphic">
                                            <div class="graphic_area">
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line1Oven3Chamber1) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line1Oven3Chamber1,line1Oven3Chamber1Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber1) }"></div>
                                                </div>
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line1Oven3Chamber2) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line1Oven3Chamber2,line1Oven3Chamber2Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven3Chamber2) }"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oven_state">
                                            <p class="oven_name">11#</p>
                                            <img src="../assets/green.png" class="ovenstatus1" v-show="line1Oven3.isrun">
                                            <img src="../assets/yellow.png" class="ovenstatus2" v-show="line1Oven3.isstandby" v-if="isFlashing">
                                            <img src="../assets/red.png" class="ovenstatus3" v-show="line1Oven3.isshutdown" v-if="isFlashing">
                                        </div>
                                    </div>
                                    <div class="connectline"></div>
                                    <div class="oven">
                                        <div class="oven_graphic">
                                            <div class="graphic_area">
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line1Oven4Chamber1) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line1Oven4Chamber1,line1Oven4Chamber1Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber1) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber1) }"></div>
                                                </div>
                                                <div class="oven_chamber" :style="{ backgroundColor: getColor(line1Oven4Chamber2) }">
                                                    <svg class="jiaocha" v-show='computeChamberState(line1Oven4Chamber2,line1Oven4Chamber2Result)'
                                                     width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
                                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="2"/>
                                                    </svg>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber2) }"></div>
                                                    <div class="tray" :style="{ backgroundColor: getSubColor(line1Oven4Chamber2) }"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oven_state">
                                            <p class="oven_name">12#</p>
                                            <img src="../assets/green.png" class="ovenstatus1" v-show="line1Oven4.isrun">
                                            <img src="../assets/yellow.png" class="ovenstatus2" v-show="line1Oven4.isstandby" v-if="isFlashing">
                                            <img src="../assets/red.png" class="ovenstatus3" v-show="line1Oven4.isshutdown" v-if="isFlashing">
                                        </div>
                                    </div>
                                    <div class="connectline"></div>
                                </div>
                            </div>
                        </div>
                        <div class="statelegend">
                            <div class="legendcontent" v-for="item in legendcontent">
                                <div class="legend" :style="{ backgroundColor: getColor(item.legend) }">
                                    <svg class="jiaocha" v-show='computeChamberState(item.legend,item.flag)'
                                    width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                    <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="4"/>
                                    <line x1="100" y1="0" x2="0" y2="100" stroke="black" stroke-width="4"/>
                                    </svg>
                                    <div class="block" :style="{ backgroundColor: getSubColor(item.legend) }"></div>
                                    <div class="block" :style="{ backgroundColor: getSubColor(item.legend) }"></div>
                                </div>
                                <p class="content">{{ item.content }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="Realtime_Alarm">
                <div class="line_Alarm">
                    <div class="subtitle">1线报警信息</div>
                    <div class="alarmarea">
                        <div class="alarmcontent">
                            <div class="alarmtopic">
                                <img src="../assets/alarm_light.png" class="alarmlight">
                                <p class="alarmtitle">1线异常报警</p>
                            </div>
                            <el-button type="info" size="mini" round @click="restartBakeLine1()">复位/启动</el-button>
                            <el-table
                                class="alarmlist"
                                :data="tableData1"
                                size="mini"
                                :header-cell-style="{ padding:0,background:'#0a1136',color:'white',textAlign:'center'}"
                                :cell-style="{padding:0,background:'#0d1543',color:'red',textAlign: 'center',fontWeight:'bold'}"
                                style="width: 100%">
                                <el-table-column
                                    prop="alarmtime"
                                    label="报警时间"
                                    width="140">
                                </el-table-column>
                                <el-table-column
                                    prop="alarminfor"
                                    label="报警信息"
                                    show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="line_Alarm">
                    <div class="subtitle">2线报警信息</div>
                    <div class="alarmarea">
                        <div class="alarmcontent">
                            <div class="alarmtopic">
                                <img src="../assets/alarm_light.png" class="alarmlight">
                                <p class="alarmtitle">2线异常报警</p>
                            </div>
                            <el-button type="info" size="mini" round @click="restartBakeLine2()">复位/启动</el-button>
                            <el-table
                                class="alarmlist"
                                :data="tableData2"
                                size="mini"
                                :header-cell-style="{ padding:0,background:'#0a1136',color:'white',textAlign:'center'}"
                                :cell-style="{padding:0,background:'#0d1543',color:'red',textAlign: 'center',fontWeight:'bold'}"
                                style="width: 100%">
                                <el-table-column
                                    prop="alarmtime"
                                    label="报警时间"
                                    width="140">
                                </el-table-column>
                                <el-table-column
                                    prop="alarminfor"
                                    label="报警信息"
                                    show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="line_Alarm">
                    <div class="subtitle">3线报警信息</div>
                    <div class="alarmarea">
                        <div class="alarmcontent">
                            <div class="alarmtopic">
                                <img src="../assets/alarm_light.png" class="alarmlight">
                                <p class="alarmtitle">3线异常报警</p>
                            </div>
                            <el-button type="info" size="mini" round @click="restartBakeLine3()">复位/启动</el-button>
                            <el-table
                                class="alarmlist"
                                :data="tableData3"
                                size="mini"
                                :header-cell-style="{ padding:0,background:'#0a1136',color:'white',textAlign:'center'}"
                                :cell-style="{padding:0,background:'#0d1543',color:'red',textAlign: 'center',fontWeight:'bold'}"
                                style="width: 100%">
                                <el-table-column
                                    prop="alarmtime"
                                    label="报警时间"
                                    width="140">
                                </el-table-column>
                                <el-table-column
                                    prop="alarminfor"
                                    label="报警信息"
                                    show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.bake{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background: url(../assets/backimg.jpeg) no-repeat center center;
    background-size: cover;
    background-position: center;
    z-index: -1;
    color: white;
    /* background-blend-mode: overlay; */
    /* backdrop-filter: blur(3.125rem); */
}
.toparea{
    width: 100%;
    height: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.statuslist{
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
}
.status_description{
    width: 5.625rem;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.status1{
    width: 1.875rem;
    height: 1.875rem;
}
.status2{
    width: 2.1875rem;
    height: 2.1875rem;
}
.status3{
    width: 2.5rem;
    height: 2.5rem;
}
.status1, .status2, .status3{
    margin-top: .1875rem;
}
.description{
    font-size: 1.5rem;
    vertical-align: center;
}
.currenttime{
    font-size: 1.25rem;
    position: absolute;
    right: 1.25rem;
}
.mainarea{
    width: 100%;
    height: 95%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* margin-top: -0.3125rem; */
}
.running_state{
    width: 96%;
    height: 65%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.subtitle{
    color: rgba(41, 224, 227, 1);
    /* font-size: 1.125rem; */
    font-weight: bold;
    margin-bottom: .3125rem;
}
.statearea{
    width: 100%;
    height: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .5rem;
    border: .125rem solid rgba(41, 224, 227, 1);
    box-shadow: 0rem 0rem .3125rem rgba(41, 211, 227, 1);
}
.statecontent{
    width: 99.8%;
    height: 99%;
    background: rgba(41, 180, 227, 0.1);
    border-radius: .375rem;
    display: flex;
    justify-content: space-between;
}
.statemap{
    width: 82%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.statelegend{
    width: 16%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* align-items: center; */
}
.legendcontent{
    display: flex;
    align-items: center;
}
.legend{
    background: silver;
    width: 3.25rem;
    height: 1.375rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin-right: .625rem;
    position: relative;
}
.block{
    width: 2.875rem;
    height: .5rem;
}
.linestate{
    width: 100%;
    /* height: 33%; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.topic{
    font-size: 1.125rem;
    margin-right: .5rem;
}
.ovenlist{
    display: flex;
    align-items: center;
}
.connectline{
    width: 4.375rem;
    height: .3125rem;
    background: silver;
}
.oven{
    width: 6.75rem;
    /* height: 8.5rem; */
    display: flex;
    flex-direction: column;
}
.oven_graphic{
    width: 6.75rem;
    height: 6.5rem;
    border-radius: .5rem;
    background-color: silver;
    display: flex;
    justify-content: center;
    align-items: center;
}
.graphic_area{
    width: 6.25rem;
    height: 6rem;
    display: flex;
    flex-wrap: wrap;
    border: .125rem solid grey;
    border-radius: .1875rem;
}
.oven_chamber{
    width: 3rem;
    height: 5.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: relative;
}
.jiaocha{
    position: absolute;
}
.tray{
    width: 2.5rem;
    height: .4375rem;
}
.oven_state{
    width: 100%;
    height: 1.5625rem;
    display: flex;
    /* justify-content: center; */
    align-items: center;
}
.oven_name{
    margin: 0 .3125rem 0 2.1875rem;
}
.special{
    margin: 0 .3125rem 0 .625rem;
}
/* .ovenstatus1, .ovenstatus2, .ovenstatus3{
    position: relative;
    right: .3125rem;
} */
.ovenstatus1{
    width: 1rem;
    height: 1rem;
}
.ovenstatus2{
    width: 1.125rem;
    height: 1.125rem;
}
.ovenstatus3{
    width: 1.375rem;
    height: 1.375rem; 
}
.Realtime_Alarm{
    width: 96%;
    height: 34%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.line_Alarm{
    width: 32%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.alarmarea{
    width: 100%;
    height: 12.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: rgba(41, 180, 227, 0.31); */
    border-radius: .5rem;
    border: .125rem solid rgba(41, 224, 227, 1);
    box-shadow: 0rem 0rem .3125rem rgba(41, 211, 227, 1);
}
.alarmcontent{
    width: 99%;
    height: 98%;
    background: rgba(41, 180, 227, 0.1);
    border-radius: .375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.alarmtopic{
    width: 100%;
    height: 18%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.alarmlight{
    width: 1.875rem;
    height: 1.875rem;
    margin-right: .625rem;
}
.alarmtitle{
    font-size: 1.25rem;
    font-weight: 800;
    color: red;
}
.alarmlist{
    margin-top: .5rem;
    height: 100%;
    overflow-y: auto; /* 当内容超出时显示垂直滚动条 */
}
.el-table, .el-table__expanded-cell {
    background-color: #0d1543 !important;
}
.el-table::before {
    height: 0;
}
</style>
<script>
export default{
    mounted(){
        this.startFlashing();
        this.line1Oven1Chamber1='noTray',
        this.line1Oven1Chamber2='emptyTray',
        this.line1Oven2Chamber1='waitBake',
        this.line1Oven2Chamber2='baking',
        this.line1CoolingBoxChamber1='waitCoolDown',
        this.line1CoolingBoxChamber2='coolingCompleted',
        this.line1Oven3Chamber1='noTray',
        this.line1Oven3Chamber2='emptyTray',
        this.line1Oven4Chamber1='waitBake',
        this.line1Oven4Chamber2='baking',

        this.line1Oven1Chamber1Result='OK'
        this.line1Oven1Chamber2Result=='OK'
        this.line1Oven2Chamber1Result='OK'
        this.line1Oven2Chamber2Result='OK'
        this.line1CoolingBoxChamber1Result='OK'
        this.line1CoolingBoxChamber2Result='OK'
        this.line1Oven3Chamber1Result=''
        this.line1Oven3Chamber2Result='NG'
        this.line1Oven4Chamber1Result=''
        this.line1Oven4Chamber2Result=''

        this.line1Oven1.status='run',
        this.line1Oven2.status='shutdown',
        this.line1CoolingBox.status='run',
        this.line1Oven3.status='standby',
        this.line1Oven4.status='run'

        this.line2Oven1Chamber1='noTray',
        this.line2Oven1Chamber2='emptyTray',
        this.line2Oven2Chamber1='waitBake',
        this.line2Oven2Chamber2='baking',
        this.line2CoolingBoxChamber1='waitCoolDown',
        this.line2CoolingBoxChamber2='coolingCompleted',
        this.line2Oven3Chamber1='noTray',
        this.line2Oven3Chamber2='emptyTray',
        this.line2Oven4Chamber1='waitBake',
        this.line2Oven4Chamber2='baking',

        this.line2Oven1Chamber1Result='OK'
        this.line2Oven1Chamber2Result=='OK'
        this.line2Oven2Chamber1Result='OK'
        this.line2Oven2Chamber2Result='OK'
        this.line2CoolingBoxChamber1Result='NG'
        this.line2CoolingBoxChamber2Result=''
        this.line2Oven3Chamber1Result=''
        this.line2Oven3Chamber2Result='NG'
        this.line2Oven4Chamber1Result=''
        this.line2Oven4Chamber2Result=''

        this.line2Oven1.status='run',
        this.line2Oven2.status='shutdown',
        this.line2CoolingBox.status='run',
        this.line2Oven3.status='standby',
        this.line2Oven4.status='run'
    },
    data(){
        return{
            isFlashing:undefined,
            currentTime: this.getCurrentDateTime(),
            line1Oven1Chamber1:'',
            line1Oven1Chamber2:'',
            line1Oven2Chamber1:'',
            line1Oven2Chamber2:'',
            line1CoolingBoxChamber1:'',
            line1CoolingBoxChamber2:'',
            line1Oven3Chamber1:'',
            line1Oven3Chamber2:'',
            line1Oven4Chamber1:'',
            line1Oven4Chamber2:'',

            line1Oven1Chamber1Result:'',
            line1Oven1Chamber2Result:'',
            line1Oven2Chamber1Result:'',
            line1Oven2Chamber2Result:'',
            line1CoolingBoxChamber1Result:'',
            line1CoolingBoxChamber2Result:'',
            line1Oven3Chamber1Result:'',
            line1Oven3Chamber2Result:'',
            line1Oven4Chamber1Result:'',
            line1Oven4Chamber2Result:'',
            line1Oven1:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line1Oven2:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line1CoolingBox:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line1Oven3:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line1Oven4:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },

            line2Oven1Chamber1:'',
            line2Oven1Chamber2:'',
            line2Oven2Chamber1:'',
            line2Oven2Chamber2:'',
            line2CoolingBoxChamber1:'',
            line2CoolingBoxChamber2:'',
            line2Oven3Chamber1:'',
            line2Oven3Chamber2:'',
            line2Oven4Chamber1:'',
            line2Oven4Chamber2:'',

            line2Oven1Chamber1Result:'',
            line2Oven1Chamber2Result:'',
            line2Oven2Chamber1Result:'',
            line2Oven2Chamber2Result:'',
            line2CoolingBoxChamber1Result:'',
            line2CoolingBoxChamber2Result:'',
            line2Oven3Chamber1Result:'',
            line2Oven3Chamber2Result:'',
            line2Oven4Chamber1Result:'',
            line2Oven4Chamber2Result:'',
            line2Oven1:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line2Oven2:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line2CoolingBox:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line2Oven3:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line2Oven4:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },

            legendcontent:[
                {
                    legend:'noTray',
                    content:'无托盘(禁用)',
                    flag:''
                },
                {
                    legend:'emptyTray',
                    content:'空托盘(禁用)',
                    flag:''
                },
                {
                    legend:'waitBake',
                    content:'待烘烤(禁用)',
                    flag:''
                },
                {
                    legend:'baking',
                    content:'烘烤中(禁用)',
                    flag:''
                },
                {
                    legend:'waitCoolDown',
                    content:'待冷却(禁用)',
                    flag:''
                },
                {
                    legend:'coolingCompleted',
                    content:'冷却完成(禁用)',
                    flag:''
                },
                {
                    legend:'waitCoolDown',
                    content:'待冷却(解禁)',
                    flag:'OK'
                },
                {
                    legend:'coolingCompleted',
                    content:'冷却完成(解禁)',
                    flag:'OK'
                },
            ],
            tableData1: [{
                alarmtime: '2025-02-12 08:02:43',
                alarminfor: '未确定多轴协调动作中的原点,检查原点是否发生偏移'
            }, {
                alarmtime: '2025-02-12 08:09:26',
                alarminfor: '位置偏差警告'
            }],
            tableData2: [{
                alarmtime: '2025-02-12 07:58:43',
                alarminfor: '无法计算绝对值编码器当前位置'
            }, {
                alarmtime: '2025-02-12 08:03:26',
                alarminfor: '伺服防撞检测报警'
            },{
                alarmtime: '2025-02-12 08:21:54',
                alarminfor: '轨段选项结构体的OFF时刻补偿超过设定范围'
            }],
            tableData3: [{
                alarmtime: '2025-02-12 07:36:13',
                alarminfor: '超过扭矩倾斜设定范围'
            }]
        }
    },
    watch:{
        'line1Oven1.status': function(newVal, oldVal){
            switch(this.line1Oven1.status){
                case 'run':
                    this.line1Oven1.isrun=true
                    this.line1Oven1.isstandby=false
                    this.line1Oven1.isshutdown=false
                    break;
                case 'standby':
                    this.line1Oven1.isrun=false
                    this.line1Oven1.isstandby=true
                    this.line1Oven1.isshutdown=false
                    break;
                case 'shutdown':
                    this.line1Oven1.isrun=false
                    this.line1Oven1.isstandby=false
                    this.line1Oven1.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line1Oven2.status': function(newVal, oldVal){
            switch(this.line1Oven2.status){
                case 'run':
                    this.line1Oven2.isrun=true
                    this.line1Oven2.isstandby=false
                    this.line1Oven2.isshutdown=false
                    break;
                case 'standby':
                    this.line1Oven2.isrun=false
                    this.line1Oven2.isstandby=true
                    this.line1Oven2.isshutdown=false
                    break;
                case 'shutdown':
                    this.line1Oven2.isrun=false
                    this.line1Oven2.isstandby=false
                    this.line1Oven2.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line1CoolingBox.status': function(newVal, oldVal){
            switch(this.line1CoolingBox.status){
                case 'run':
                    this.line1CoolingBox.isrun=true
                    this.line1CoolingBox.isstandby=false
                    this.line1CoolingBox.isshutdown=false
                    break;
                case 'standby':
                    this.line1CoolingBox.isrun=false
                    this.line1CoolingBox.isstandby=true
                    this.line1CoolingBox.isshutdown=false
                    break;
                case 'shutdown':
                    this.line1CoolingBox.isrun=false
                    this.line1CoolingBox.isstandby=false
                    this.line1CoolingBox.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line1Oven3.status': function(newVal, oldVal){
            switch(this.line1Oven3.status){
                case 'run':
                    this.line1Oven3.isrun=true
                    this.line1Oven3.isstandby=false
                    this.line1Oven3.isshutdown=false
                    break;
                case 'standby':
                    this.line1Oven3.isrun=false
                    this.line1Oven3.isstandby=true
                    this.line1Oven3.isshutdown=false
                    break;
                case 'shutdown':
                    this.line1Oven3.isrun=false
                    this.line1Oven3.isstandby=false
                    this.line1Oven3.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line1Oven4.status': function(newVal, oldVal){
            switch(this.line1Oven4.status){
                case 'run':
                    this.line1Oven4.isrun=true
                    this.line1Oven4.isstandby=false
                    this.line1Oven4.isshutdown=false
                    break;
                case 'standby':
                    this.line1Oven4.isrun=false
                    this.line1Oven4.isstandby=true
                    this.line1Oven4.isshutdown=false
                    break;
                case 'shutdown':
                    this.line1Oven4.isrun=false
                    this.line1Oven4.isstandby=false
                    this.line1Oven4.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line2Oven1.status': function(newVal, oldVal){
            switch(this.line2Oven1.status){
                case 'run':
                    this.line2Oven1.isrun=true
                    this.line2Oven1.isstandby=false
                    this.line2Oven1.isshutdown=false
                    break;
                case 'standby':
                    this.line2Oven1.isrun=false
                    this.line2Oven1.isstandby=true
                    this.line2Oven1.isshutdown=false
                    break;
                case 'shutdown':
                    this.line2Oven1.isrun=false
                    this.line2Oven1.isstandby=false
                    this.line2Oven1.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line2Oven2.status': function(newVal, oldVal){
            switch(this.line2Oven2.status){
                case 'run':
                    this.line2Oven2.isrun=true
                    this.line2Oven2.isstandby=false
                    this.line2Oven2.isshutdown=false
                    break;
                case 'standby':
                    this.line2Oven2.isrun=false
                    this.line2Oven2.isstandby=true
                    this.line2Oven2.isshutdown=false
                    break;
                case 'shutdown':
                    this.line2Oven2.isrun=false
                    this.line2Oven2.isstandby=false
                    this.line2Oven2.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line2CoolingBox.status': function(newVal, oldVal){
            switch(this.line2CoolingBox.status){
                case 'run':
                    this.line2CoolingBox.isrun=true
                    this.line2CoolingBox.isstandby=false
                    this.line2CoolingBox.isshutdown=false
                    break;
                case 'standby':
                    this.line2CoolingBox.isrun=false
                    this.line2CoolingBox.isstandby=true
                    this.line2CoolingBox.isshutdown=false
                    break;
                case 'shutdown':
                    this.line2CoolingBox.isrun=false
                    this.line2CoolingBox.isstandby=false
                    this.line2CoolingBox.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line2Oven3.status': function(newVal, oldVal){
            switch(this.line2Oven3.status){
                case 'run':
                    this.line2Oven3.isrun=true
                    this.line2Oven3.isstandby=false
                    this.line2Oven3.isshutdown=false
                    break;
                case 'standby':
                    this.line2Oven3.isrun=false
                    this.line2Oven3.isstandby=true
                    this.line2Oven3.isshutdown=false
                    break;
                case 'shutdown':
                    this.line2Oven3.isrun=false
                    this.line2Oven3.isstandby=false
                    this.line2Oven3.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line2Oven4.status': function(newVal, oldVal){
            switch(this.line2Oven4.status){
                case 'run':
                    this.line2Oven4.isrun=true
                    this.line2Oven4.isstandby=false
                    this.line2Oven4.isshutdown=false
                    break;
                case 'standby':
                    this.line2Oven4.isrun=false
                    this.line2Oven4.isstandby=true
                    this.line2Oven4.isshutdown=false
                    break;
                case 'shutdown':
                    this.line2Oven4.isrun=false
                    this.line2Oven4.isstandby=false
                    this.line2Oven4.isshutdown=true
                    break;
                default:
                    break;
            }
        }
    },
    methods:{
        startFlashing() {
            this.isFlashing = true;
            this.intervalId = setInterval(() => {
                this.isFlashing = !this.isFlashing;
                this.currentTime = this.getCurrentDateTime();
            }, 1000); // 每秒切换一次
        },
        getCurrentDateTime(){
            const now = new Date();
            return `${now.getFullYear()}-${this.padNumber(now.getMonth() + 1)}-${this.padNumber(now.getDate())}
            ${this.padNumber(now.getHours())}:${this.padNumber(now.getMinutes())}:${this.padNumber(now.getSeconds())}`;
        },
        padNumber(num) {
            return num < 10 ? '0' + num : num;
        },
        getColor(value){
            if(value=='noTray'){
                return ''
            }
            else if(value=='emptyTray'){
                return ''
            }
            else if(value=='waitBake'){
                return ''
            }
            else if(value=='baking'){
                return 'yellow'
            }
            else if(value=='waitCoolDown'){
                return ''
            }
            else if(value=='coolingCompleted'){
                return ''
            }
        },
        getSubColor(value){
            if(value=='noTray'){
                return 'white'
            }
            else if(value=='emptyTray'){
                return 'grey'
            }
            else if(value=='waitBake'){
                return 'green'
            }
            else if(value=='baking'){
                return 'green'
            }
            else if(value=='waitCoolDown'){
                return '#0000CD'
            }
            else if(value=='coolingCompleted'){
                return 'yellow'
            }
        },
        computeChamberState(value1,value2){
            if(value1=='noTray' || value1=='emptyTray' || value1=='waitBake' || value1=='baking'){
                return true
            }
            else if(value1=='waitCoolDown' || value1=='coolingCompleted'){
                if(value2=='OK'){
                    return false
                }
                else{
                    return true
                }
            }
        },
        restartBakeLine1(){
            this.$confirm('此操作将复位并启动烘烤1线工艺设备, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //给后端接口复位信号
                this.$message({
                    type: 'success',
                    message: '已完成复位启动操作!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });          
            })
        },
        restartBakeLine2(){
            this.$confirm('此操作将复位并启动烘烤2线工艺设备, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //给后端接口复位信号
                this.$message({
                    type: 'success',
                    message: '已完成复位启动操作!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });          
            })
        },
        restartBakeLine3(){
            this.$confirm('此操作将复位并启动烘烤3线工艺设备, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //给后端接口复位信号
                this.$message({
                    type: 'success',
                    message: '已完成复位启动操作!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });          
            })
        },
    }
}
</script>